<nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="class.id ? '班级信息详情' : '新增班级信息'"
  (nzOnCancel)="handleCancel()" [nzFooter]="detailFooter" nzWidth="1200">

  <form nz-form [formGroup]="validateForm" #classForm="ngForm">
    <div nz-row [nzGutter]="16">
      <b style="color: red;">基本信息</b>
      <nz-divider nzType="horizontal"></nz-divider>
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>所属学院</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <app-academy-select [(academyId)]="class.academyId" [academyName]="class.academyName"
              [isPreView]="isPreView" *ngIf="!isPreView; else academyTemp">
            </app-academy-select>
            <ng-template #academyTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ class?.academyName }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>所属专业</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <app-profession-select [academyId]="class.academyId" [(professionId)]="class.professionId"
              [professionName]="class.professionName" [isPreView]="isPreView" *ngIf="!isPreView; else professionTemp">
            </app-profession-select>
            <ng-template #professionTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ class?.professionName }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="grade" nzRequired>所属年级</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="gradeErrorTpl">
            <nz-year-picker nzPlaceHolder="请选择所属年份" formControlName="grade" [(ngModel)]="class.grade"
              *ngIf="!isPreView; else gradeTemp"></nz-year-picker>
            <ng-template #gradeErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请选择年份!
              </ng-container>
            </ng-template>
            <ng-template #gradeTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ class?.grade }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="code" nzRequired>班级编码</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="codeErrorTpl">
            <input nz-input formControlName="code" [(ngModel)]="class.code"
              [placeholder]="class.professionId ? '专业编码必填' : '请先选择专业'" *ngIf="!isPreView; else codeTemp">
            <ng-template #codeErrorTpl let-control>
              <ng-container *ngIf="control.hasError('noProfession')">
                请先选择专业!
              </ng-container>
              <ng-container *ngIf="control.hasError('required')">
                请输入班级编码!
              </ng-container>
              <ng-container *ngIf="control.hasError('duplicated')">
                该班级编码已存在!
              </ng-container>
              <ng-container *ngIf="control.hasError('blank')">
                不可输入空格!
              </ng-container>
            </ng-template>
            <ng-template #codeTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ class?.code }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="name" nzRequired>班级名称</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="nameErrorTpl">
            <input nz-input formControlName="name" [(ngModel)]="class.name" placeholder="班级名称必填"
              *ngIf="!isPreView; else nameTemp">
            <ng-template #nameErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入班级名称!
              </ng-container>
              <ng-container *ngIf="control.hasError('pattern')">
                不能存在空格字符!
              </ng-container>
            </ng-template>
            <ng-template #nameTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ class?.name }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="shortName">班级简称</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback nzErrorTip="MaxLength is 10">
            <input nz-input formControlName="shortName" [(ngModel)]="class.shortName" placeholder="班级简称选填"
              *ngIf="!isPreView; else shortNameTemp" maxlength="10">
            <ng-template #shortNameTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ class?.shortName }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="showOrder" nzRequired [nzSpan]="10">显示顺序</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="showOrderErrorTpl">
            <nz-input-number [(ngModel)]="class.showOrder" [nzMin]="0" [nzStep]="1" formControlName="showOrder"
              *ngIf="!isPreView; else showOrderTemp">
            </nz-input-number>
            <ng-template #showOrderErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入显示顺序!
              </ng-container>
            </ng-template>
            <ng-template #showOrderTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ class?.showOrder }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>

  <ng-template #detailFooter>
    <button nz-button nzType="primary" (click)="save()" *ngIf="!isPreView" [nzLoading]="loading">
      <span>保存</span>
    </button>
    <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
  </ng-template>
</nz-modal>
